import * as React from "react";
import { IStep, IWin } from "../../state";
import { observer } from "mobx-react";
import "./index.css";
import { rownames, colnames } from "../../utils/constants";
import dayjs from "dayjs";

interface IProps {
	winHistory: IWin[];
	// stepClick: (step: IWin) => void|null;
}

const WinHistory: React.SFC<IProps> = observer(({ winHistory }) => {
	return (
		<div className="game-status-container history-container">
			{winHistory.map((win) => (
				<div key={win.startTime} className="history-step">
					{`${dayjs(win.startTime).format("HH:mm:ss")}：空${
						win.numberOfMumbers
					}，难度${win.difficulty}，${win.time}秒`}
				</div>
			))}
		</div>
	);
});

export default WinHistory;
